<template>
    <div>
        <tableComponents :isShow="false" :isHavePagination="false" :isHaveExport="false" @toAdd="addPic">
            <template v-slot:table>
                <div class="local_gallery_top">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    <el-button :loading="$store.state.isLoading" type="danger" size="mini"
                        @click="delAll()">批量删除</el-button>
                </div>
                <el-checkbox-group v-model="delList" @change="handleCheckChange">
                    <div v-loading="loading" class="local_gallery">
                        <div class="local_gallery_item" v-for="(item, i) in list" :key="i">
                            <el-image style="width: 120px; height: 120px" :src="$fnc.getImgUrl(item)"
                                :preview-src-list="list">
                            </el-image>
                            <p>{{ item }}</p>
                            <i class="el-icon-delete" @click="delImg(item)"></i>
                            <el-checkbox :label="item"> </el-checkbox>
                        </div>
                    </div>
                </el-checkbox-group>

                <div class="tc" style="position: relative;margin: 20px 0;" v-if="list.length == 0">
                    <el-upload class="upload-demo" drag :data="{}" action="/api/common/upload/local_gallery" multiple
                        list-type="none" :show-file-list="false" :on-success="onSuccess">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">
                            只能上传jpg/png文件，且不超过500kb
                        </div>
                    </el-upload>
                </div>
            </template>
        </tableComponents>

        <el-dialog :close-on-click-modal="false" title="UI图" class="tl size_13" width="700px" :visible.sync="show_pic">
            <div class="tc" style="position: relative">
                <el-upload class="upload-demo" drag :data="{}" action="/api/common/upload/local_gallery" multiple
                    list-type="none" :show-file-list="false" :on-success="onSuccess">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">
                        只能上传jpg/png文件，且不超过500kb
                    </div>
                </el-upload>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            picList: [],
            show_pic: false,
            list: [],
            delList: [],
            checkAll: false,
            isIndeterminate: false
        };
    },
    components: {},
    created() {
        this.local_gallery_lists()
    },
    methods: {
        handleCheckChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.list.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
        },
        handleCheckAllChange(val) {
            this.delList = val ? this.list : [];
            this.isIndeterminate = false;
        },
        delAll() {
            this.$swal({
                title: "您确定要删除选中的图片吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的，我要删除",
                cancelButtonText: "容我三思"
            }).then(willDelete => {
                if (willDelete.value) {
                    var params = {
                        url: this.delList.join("@")
                    };
                    this.$api.getPage.local_gallery_del(params).then((res) => {
                        if (res.data.code == 200) {
                            this.$fnc.alertSuccess({ text: "删除成功" });
                            this.local_gallery_lists();
                        } else {
                            this.$fnc.alertError(res.data.code_desc, res.data.result);
                        }
                    });
                }
            });
        },
        delImg(item) {
            var params = {
                url: item
            };
            this.$api.getPage.local_gallery_del(params).then((res) => {
                if (res.data.code == 200) {
                    this.$fnc.alertSuccess({ text: "删除成功" });
                    this.local_gallery_lists()
                } else {
                    this.$fnc.alertError(res.data.code_desc, res.data.result);
                }
            });
        },
        local_gallery_lists() {
            this.loading = true;
            var params = {};
            this.$api.getPage.local_gallery_lists(params).then((res) => {
                if (res.data.code == 200) {
                    this.list = res.data.result;
                    this.isIndeterminate = false;
                    this.delList = [];
                    this.checkAll = false;
                }
            });
            this.loading = false;
        },
        addPic() {
            this.picList = [];
            this.show_pic = true;
        },
        onSuccess(pic, file, fileList, index) {
            console.log(pic, file, fileList, index)
            this.picList.push(pic.result);
            this.local_gallery_lists()
        },
    }
};
</script>
<style lang="less" scoped>
.local_gallery_top {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .el-button {
        margin-left: 20px;
    }

}

.local_gallery {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 14px;
    cursor: pointer;

    .local_gallery_item {
        width: 16%;
        text-align: center;
        position: relative;
        padding: 10px;
        border: 1px dashed #cecece;
        margin: 5px;

        .el-image {
            margin: 20px 0;
        }

        i {
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: 20px;
        }

        .el-checkbox {
            position: absolute;
            left: 10px;
            top: 10px;
            font-size: 20px;

            /deep/.el-checkbox__label {
                display: none;
            }
        }
    }

}
</style>